<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Object</title>
</head>
<body>
    <script>

        // 继承方案 1
        function First(name) {
            this.name = name;
            this.say = function() {
                return 'My name is ' + this.name + '.';
            }
        }
        First.prototype.sayHello = function() {
            return "hello," + this.name;
        }

        function Element1(name, age) {
            First.call(this, name);
            this.age = age;
        }
        Element1.prototype = First.prototype;
        Element1.prototype.constructor = Element1;
        Element1.prototype.go = function() {
            return "go go go!";
        }
        var e1 = new Element1('Jack', 26);
        console.log('First.constructor = ', First.constructor);
        console.log('WARN !!!! First.prototype = ', First.prototype);
        console.log('First.__proto__ ', First.__proto__);
        console.log('Element1.constructor = ', Element1.constructor);
        console.log('Element1.prototype = ', Element1.prototype);
        console.log('Element1.__proto__ = ', Element1.__proto__);
        console.log('e1.constructor = ', e1.constructor);
        console.log('e1.prototype = ', e1.prototype);
        console.log('e1.__proto__ = ', e1.__proto__);
        console.log('e1.say = ', e1.say());
        console.log('e1.sayHello = ', e1.sayHello());

        // 继承方案 2
        let Second = function (name) {
            this.name = name;
            this.arr = [1, 2, 3];
            this.say = function() {
                return 'My name is ' + this.name + '.';
            }
        }
        Second.prototype.sayHello = function() {
            return "hello," + this.name;
        }

        function Element2(name, age) {
            Second.call(this, name);
            this.age = age;
        }
        Element2.prototype = new Second();
        Element2.prototype.constructor = Element2;
        Element2.prototype.go = function() {
            return this.arr.join(',');
        }
        var e2 = new Element2('Rose', 26);
        var e3 = new Element2('Tom', 23);
        console.log('Second.constructor = ', Second.constructor);
        console.log('Second.prototype = ', Second.prototype);
        console.log('Second.__proto__ ', Second.__proto__);
        console.log('Element2.constructor = ', Element2.constructor);
        console.log('Element2.prototype = ', Element2.prototype);
        console.log('Element2.__proto__ = ', Element2.__proto__);
        console.log('e2.constructor = ', e2.constructor);
        console.log('e2.prototype = ', e2.prototype);
        console.log('e2.__proto__ = ', e2.__proto__);
        console.log('e2.say = ', e2.say());
        console.log('e2.sayHello = ', e2.sayHello());
        console.log('e2.go = ', e2.go());
        console.log('e3.go = ', e3.go());
        e3.arr.push(4, 5, 6);
        console.log('e2.go = ', e2.go());
        console.log('WARN !!!! e3.go = ', e3.go());

        // 继承方案 3
        function Third(name) {
            this.name = name;
            this.arr = [1, 2, 3];
            this.say = function() {
                return 'My name is ' + this.name + '.';
            }
        }
        Third.prototype.sayHello = function() {
            return "hello," + this.name;
        }

        function Element3(name, age) {
            Third.call(this, name);
            this.age = age;
        }
        Element3.prototype = Object.create(Third.prototype);
        Element3.prototype.constructor = Element3;
        Element3.prototype.go = function() {
            return this.arr.join(',');
        }
        var e4 = new Element3('Rose', 26);
        var e5 = new Element3('Tom', 23);
        console.log('Third.constructor = ', Third.constructor);
        console.log('Third.prototype = ', Third.prototype);
        console.log('Third.__proto__ = ', Third.__proto__);
        console.log('Third.prototype.constructor ===  Third = ', Third.prototype.constructor ===  Third);
        console.log('Third.__proto__.constructor ===  Third = ', Third.__proto__.constructor ===  Third);
        console.log('Element3.constructor = ', Element3.constructor);
        console.log('Element3.prototype = ', Element3.prototype);
        console.log('Element3.__proto__ = ', Element3.__proto__);
        console.log('e4.constructor = ', e4.constructor);
        console.log('e4.prototype = ', e4.prototype);
        console.log('e4.__proto__ = ', e4.__proto__);
        console.log('e4.say = ', e4.say());
        console.log('e4.sayHello = ', e4.sayHello());
        console.log('e4.go = ', e4.go());
        console.log('e5.go = ', e5.go());
        e5.arr = [4, 5, 6];
        console.log('e4.go = ', e4.go());
        console.log('WARN !!!! e5.go = ', e5.go());

        // 继承方案 4
        function Forth(name) {
            this.name = name;
            this.arr = [1, 2, 3];
            this.say = function() {
                return 'My name is ' + this.name + '.';
            }
        }
        Forth.prototype.sayHello = function() {
                return "hello," + this.name;
        }

        class Element4 extends Forth {
            constructor(name, age) {
                super(name);
                this.age = age;
            }

            go() {
                return this.arr.join(',');
            }
        }
        var e6 = new Element4('Jack', 26);
        var e7 = new Element4('Rose', 25);
        console.log('Forth.constructor = ', Forth.constructor);
        console.log('Forth.prototype = ', Forth.prototype);
        console.log('Forth.__proto__ ', Forth.__proto__);
        console.log('Element4.constructor = ', Element4.constructor);
        console.log('Element4.prototype = ', Element4.prototype);
        console.log('Element4.__proto__ = ', Element4.__proto__);
        console.log('e6.constructor = ', e6.constructor);
        console.log('e6.prototype = ', e6.prototype);
        console.log('e6.__proto__ = ', e6.__proto__);
        console.log('e6.say = ', e6.say());
        console.log('e6.sayHello = ', e6.sayHello());
        console.log('e6.go = ', e6.go());
        console.log('e7.go = ', e7.go());
        e7.arr = [4, 5, 6];
        console.log('e6.go = ', e6.go());
        console.log('WARN !!!! e7.go = ', e7.go());
    </script>
</body>
</html>